// useEffect发送网络请求

// 具体做法
// 1. 使用useEffect + 空依赖数组  => 确保请求只会发送一次
// 2. 在useEffect副作用函数中 单独定义一个内部的函数 在内部函数中写异步请求  不要直接
// 通过async修饰 副作用函数

// 开发

// state -> useState
// setState -> hook专有的方法
// componentDidMount -> useEffect + []

import axios from 'axios'
import { useEffect, useState } from 'react'
const URL = 'http://geek.itheima.net/v1_0/channels'


const App = () => {
  const [channels, setChannels] = useState([])

  useEffect(() => {
    const fetchList = async () => {
      const res = await axios.get(URL)
      console.log(res)
      setChannels(res.data.data.channels)
    }
    fetchList()
  }, [])

  return (
    <div>
      <ul>
        {
          channels.map(item => <li key={item.id}>{item.name}</li>)
        }
      </ul>
    </div >
  )
}

export default App